import React from 'react';

const ValidateResult = ({ result, treeMapping }) => {
    const errorList = result.error || [];
    const warnList = result.warn || [];

    const errorDisplayList =
        errorList?.length > 0
            ? errorList.map((item, index) => {
                const { displayStart, displayEnd } = treeMapping.nodeKeyDisplayPositionMap[item.nodeKey];
                const displayName = treeMapping.displayName.substring(displayStart, displayEnd);

                return {
                    key: index,
                    displayName,
                    start: displayStart + 1,
                    end: displayEnd,
                    message: item.message
                };
            })
            : [];

    const warnDisplayList =
        warnList?.length > 0
            ? warnList.map((item, index) => ({
                key: index,
                message: item.message
            }))
            : [];

    return (
        <ul className="formula-validate">
            {errorDisplayList?.length > 0
                ? errorDisplayList.map((item, index) => (
                    <li key={item.key} className="formula-validate-error">
                        {index + 1}.【 {item.displayName} 】
                        {/* (位置: {item.start === item.end ? item.start : `${item.start} ~ ${item.end}`})： */}
                        {item.message}
                    </li>
                ))
                : null}

            {warnDisplayList?.length > 0
                ? warnDisplayList.map(item => (
                    <li key={item.key} className="formula-validate-warn">
                        {item.message}
                    </li>
                ))
                : null}
        </ul>
    );
};

export default ValidateResult;
